 	<div id='subTabs'>
		<div id='categorybar1' class='categorybar' style='margin: 0px 20px 0px 20px; height:28px; wwidth:1236px; background-color:#8DB3E2; border:2px solid #000767; border-bottom: none; text-align: center; padding-top:7px;'> <!--Expected Uses-->
        
        <span class='categorytab' id='categorytab11'><a onclick='javascript:tabview_switch(11);'><img src='img/progressball/ProgressBall_100.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>Overview</span>
<img src='img/arrow-18-xxl.png' alt='logo' height='25' width='30' style='vertical-align: middle; margin-bottom:2px;'/>
<span class='categorytab' id='categorytab12'><a onclick='javascript:tabview_switch(12);'><img src='img/progressball/ProgressBall_75.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>Questions</span>

        </div>
		<div id='categorybar2' class='categorybar' style='margin: 0px 20px 0px 20px; height:28px; wwidth:1236px; background-color:#8DB3E2; border:2px solid #000767; border-bottom: none; text-align: center; padding-top:7px;'> <!--Expected Uses-->
        
        <span class='categorytab' id='categorytab21'><a onclick='javascript:tabview_switch(21);'><img src='img/progressball/ProgressBall_100.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>Overview</span>
<img src='img/arrow-18-xxl.png' alt='logo' height='25' width='30' style='vertical-align: middle; margin-bottom:2px;'/>
<span class='categorytab' id='categorytab22'><a onclick='javascript:tabview_switch(22);'><img src='img/progressball/ProgressBall_75.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>Questions</span>

        </div>
		<div id='categorybar3' class='categorybar' style='margin: 0px 20px 0px 20px; height:28px; wwidth:1236px; background-color:#8DB3E2; border:2px solid #000767; border-bottom: none; text-align: center; padding-top:7px;'>
        	<!--
			$S .= createCategoryTab("categorybar3", "General System Features", 31, false, 100);
			$S .= createCategoryTab("categorybar3", "Data Display", 32, false, 100);
			$S .= createCategoryTab("categorybar3", "Data Export and Reporting", 33, false, 100);
			$S .= createCategoryTab("categorybar3", "Alert Generation", 34, false, 100);
			$S .= createCategoryTab("categorybar3", "Alert Notification", 35, true, 100);
            -->
<span class='categorytab' id='categorytab31'><a onclick='javascript:tabview_switch(31);'><img src='img/progressball/ProgressBall_37.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/>Overview</a></span>
<img src='img/arrow-18-xxl.png' alt='logo' height='25' width='30' style='vertical-align: middle; margin-bottom:2px;'/>
<span class='categorytab' id='categorytab32'><a onclick='javascript:tabview_switch(32);'><img src='img/progressball/ProgressBall_37.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>General System Features</span>
<img src='img/arrow-18-xxl.png' alt='logo' height='25' width='30' style='vertical-align: middle; margin-bottom:2px;'/>
<span class='categorytab' id='categorytab33'><a onclick='javascript:tabview_switch(33);'><img src='img/progressball/ProgressBall_75.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>Data Display</span>
<img src='img/arrow-18-xxl.png' alt='logo' height='25' width='30' style='vertical-align: middle; margin-bottom:2px;'/>
<span class='categorytab' id='categorytab34'><a onclick='javascript:tabview_switch(34);'><img src='img/progressball/ProgressBall_12.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>Data Export and Reporting</span>
<img src='img/arrow-18-xxl.png' alt='logo' height='25' width='30' style='vertical-align: middle; margin-bottom:2px;'/>
<span class='categorytab' id='categorytab35'><a onclick='javascript:tabview_switch(35);'><img src='img/progressball/ProgressBall_37.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>Alert Generation</span>
<img src='img/arrow-18-xxl.png' alt='logo' height='25' width='30' style='vertical-align: middle; margin-bottom:2px;'/>
<span class='categorytab' id='categorytab36'><a onclick='javascript:tabview_switch(36);'><img src='img/progressball/ProgressBall_37.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>Alert Notification</span>

		</div>
		<div id='categorybar4' class='categorybar' style='margin: 0px 20px 0px 20px; height:28px; wwidth:1236px; background-color:#8DB3E2; border:2px solid #000767; border-bottom: none; text-align: center; padding-top:7px;'>
        	<!--
			$S .= createCategoryTab("categorybar4", "Expected Uses of the System Review", 41, false, 100);
			$S .= createCategoryTab("categorybar4", "Data to be Managed Review", 42, false, 75);
			$S .= createCategoryTab("categorybar4", "Requirements Rating Review", 43, true, 37);
            -->
<span class='categorytab' id='categorytab41'><a onclick='javascript:tabview_switch(41);'><img src='img/progressball/ProgressBall_37.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>Expected Uses of the System Review</span>
<img src='img/arrow-18-xxl.png' alt='logo' height='25' width='30' style='vertical-align: middle; margin-bottom:2px;'/>
<span class='categorytab' id='categorytab42'><a onclick='javascript:tabview_switch(42);'><img src='img/progressball/ProgressBall_75.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>Data to be Managed Review</span>
<img src='img/arrow-18-xxl.png' alt='logo' height='25' width='30' style='vertical-align: middle; margin-bottom:2px;'/>
<span class='categorytab' id='categorytab43'><a onclick='javascript:tabview_switch(43);'><img src='img/progressball/ProgressBall_12.png' alt='100' height='25'  style='vertical-align: middle; padding: 2px 4px 4px 0;'/></a>Requirements Rating Review</span>

		</div>

		<script type="text/javascript">

		// A sampling of questions...
		var sample = [
				["An integrated Dashboard",
				"With an integrated 'Dashboard,' the user has access to data from more than one source within a single interface.  This commonly includes integration of data from multiple SRS components into one display.  For OWQM users, other data sources that could be useful within a Dashboard include customer complaint calls, routine grab sampling results, system maintenance activity logs, and operations data such as tank levels or flow.  Without an integrated Dashboard, users generally access the additional data by logging onto ..."],
				["User interface with data viewing and plotting capabilities",
				"Most automated information management systems contain a user interface through which users can directly access and view data.  Generally data can be viewed in a variety of formats including tabular summaries, time-series plots, control charts, and statistical summaries over an established interval.  Without this functionality, the user must query or export data from the system and then use external tools (such as Microsoft Excel) to analyze or plot the data.\n\n \
This functionality can dramatically increase the usability of the system – particularly if data is viewed frequently.  It is suggested that this functionality be included unless entirely infeasible."],
		];
	</script>
	<div style='margin-left: 20px; margin-right: 20px; margin-top: 1px; border: 2px solid #000767;
			border-top: none; margin-top: 0px;'>
	<div style='border: 6px solid #8DB3E2;
			border-top: none;'>
	<!--  Category Arrows.  Needs code to move margin-left to the proper spot on switch. -->
	<div id='categoryarrow1' style='text-align:left; margin-left: 545px; height:20px'><img src='img/category_arrow.png' height='20' width='20'></div>
	<div id='categoryarrow2' style='text-align:left; margin-left: 545px; height:20px'><img src='img/category_arrow.png' height='20' width='20'></div>
	<div id='categoryarrow3' style='text-align:left; margin-left: 630px; height:20px'><img src='img/category_arrow.png' height='20' width='20'></div>
	<div id='categoryarrow4' style='text-align:left; margin-left: 870px; height:20px'><img src='img/category_arrow.png' height='20' width='20'></div>
	<!--
	// Breadcrumbs    ... hmmmmm....
	-->
	<!--
	$S .= createBreadCrumbs(1, array("CCS", "Expected Uses of the System"));
	$S .= createBreadCrumbs(2, array("CCS", "Data to be Managed"));
	$S .= createBreadCrumbs(31, array("CCS", "Requirements Rating", "General System Features"));
	$S .= createBreadCrumbs(32, array("CCS", "Requirements Rating", "Data Display"));
	$S .= createBreadCrumbs(33, array("CCS", "Requirements Rating", "Data Export and Reporting"));
	$S .= createBreadCrumbs(34, array("CCS", "Requirements Rating", "Alert Generation"));
	$S .= createBreadCrumbs(35, array("CCS", "Requirements Rating", "Alert Notification"));
	$S .= createBreadCrumbs(41, array("CCS", "Consolidated View", "Expected Uses of the System Review"));
	$S .= createBreadCrumbs(42, array("CCS", "Consolidated View", "Data to be Managed Review"));
	$S .= createBreadCrumbs(43, array("CCS", "Consolidated View", "Requirements Rating Review"));
	-->

<div id='breadcrumbs11' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    <img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Expected Uses of the System</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Overview</a>
</div>
<div id='breadcrumbs12' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    <img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Expected Uses of the System</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Questions</a>
</div>
<div id='breadcrumbs21' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    <img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Data to be Managed</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Overview</a>
</div>
<div id='breadcrumbs22' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    <img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Data to be Managed</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Questions</a>
</div>
<div id='breadcrumbs31' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    					<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Requirements Rating</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Overview</a>
</div>
<div id='breadcrumbs32' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    					<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Requirements Rating</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>General System Features</a>
</div>
<div id='breadcrumbs33' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    					<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Requirements Rating</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Data Display</a>
</div>
<div id='breadcrumbs34' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    					<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Requirements Rating</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Data Export and Reporting</a>
</div>
<div id='breadcrumbs35' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    					<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Requirements Rating</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Alert Generation</a>
</div>
<div id='breadcrumbs36' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    					<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Requirements Rating</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Alert Notification</a>
</div>
<div id='breadcrumbs41' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    					<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Consolidated View</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Expected Uses of the System Review</a>
</div>
<div id='breadcrumbs42' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    					<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Consolidated View</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Data to be Managed Review</a>
</div>
<div id='breadcrumbs43' class='breadcrumbs'>
	<a href='javascript:void();' class='crumb'>CCS</a>    					<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Consolidated View</a>		<img src="img/arrow.png" />
    <a href='javascript:void();' class='crumb'>Requirements Rating Review</a>
</div>

	<div id='page32'>
		<div id='qheader'>Requirement 1:&nbsp;&nbsp;&nbsp;An integrated dashboard</div>
		<div id='qanswer'><span id='qcontent'>
        With an integrated "Dashboard," the user has access to data from more than one source within a single interface.  This commonly includes integration of data from multiple SRS components into one display.  For OWQM users, other data sources that could be useful within a Dashboard include customer complaint calls, routine grab sampling results, system maintenance activity logs, and operations data such as tank levels or flow.  Without an integrated Dashboard, users generally access the additional data by logging onto separate systems or by contacting individuals who manage the other systems (e.g., customer call operators) for the information.<br/><br/>
For an integrated Dashboard to be beneficial for OWQM, a) there must be information stored in separate data system(s) that would be used regularly by OWQM users, and b) there would be value in being able to access this data through one interface.  A Dashboard is likely not critical for utilities implementing only a single SRS component.  
</span><img src="img/radio_mock.png" alt='logo' height='65' width='312' style='margin-left: 10px; border: 2px solid #000767'/></div>
		<div id='qheader'>Requirement 2:&nbsp;&nbsp;&nbsp;User interface with data viewing and plotting capabilities.</div>
		<div id='qanswer'><span id='qcontent'>Most automated information management systems contain a user interface through which users can directly access and view data.  Generally data can be viewed in a variety of formats including tabular summaries, time-series plots, control charts, and statistical summaries over an established interval.  Without this functionality, the user must query or export data from the system and then use external tools (such as Microsoft Excel) to analyze or plot the data.<br/><br/>
This functionality can dramatically increase the usability of the system – particularly if data is viewed frequently.  It is suggested that this functionality be included unless entirely infeasible.
</span><img src="img/radio_mock.png" alt='logo' height='65' width='312' style='margin-left: 10px; border: 2px solid #000767'/></div>
		<div id='qheader'>Requirement 3:&nbsp;&nbsp;&nbsp;The ability to do ad hoc data access and plotting</div>
		<div id='qanswer'><span id='qcontent'>Most systems with data viewing and plotting capabilities allow the user to create plots and access the data they need at any time.  For example, the user can open a new window and choose which parameter(s) they wish to plot.  Other systems only allow the user to view screens and plots that were pre-defined during system implementation.<br/><br/>This functionality can be very useful for exploring relationships among different parameters and can be an effective tool when investigating current and historical water quality trends.  If there are users who understand data analysis techniques sufficiently to employee these techniques during review of water quality data, it is suggested that this functionality be prioritized.
</span><img src="img/radio_mock.png" alt='logo' height='65' width='312' style='margin-left: 10px; border: 2px solid #000767'/></div>
	</div> <!-- page32 -->
    
	<div id='page33'>
		<div id='qheader'>Requirement 7:&nbsp;&nbsp;&nbsp;Quick and simple process for accessing data</div>
		<div id='qanswer'><span id='qcontent'>
        In a system with a quick and simple process for accessing the data, the user can easily obtain the data or plots they desire with just a few clicks.  In systems without a streamlined data access process, users may have to spend time initializing the system or waiting for plots or reports to be generated.<br/><br/>The importance of fast data access increases as the frequency of system use increases.  As it is expected that the system will be accessed multiple times per day for OWQM, it is suggested that easy access be a strong consideration; users may become frustrated if it takes a long time to access the data they need.  
</span><img src="img/radio_mock.png" alt='logo' height='65' width='312' style='margin-left: 10px; border: 2px solid #000767'/></div>
		<div id='qheader'>Requirement 8:&nbsp;&nbsp;&nbsp;An intuitive interface</div>
		<div id='qanswer'><span id='qcontent'>Some information management system user interfaces are very intuitive and clear to use.  They often function like webpages or common computer software that most users are accustomed to, and thus users can begin using the system with little to no training.  Conversely, other systems may require hours or even days of training before users feel comfortable using the system and getting the information they need.<br/><br/>
A user friendly system becomes increasingly important as the number and variety of expected system users increases.  It is suggested that this requirement be prioritized if a large number of users is expected, if there will be users from different departments or agencies, or if new users will be frequently added.
</span><img src="img/radio_mock.png" alt='logo' height='65' width='312' style='margin-left: 10px; border: 2px solid #000767'/></div>
	</div> <!-- page33 -->
    
	<div id='page34'>
		<div id='qheader'>Requirement 12:&nbsp;&nbsp;&nbsp;An integrated Dashboard</div>
		<div id='qanswer'><span id='qcontent'>With an integrated 'Dashboard,' the user has access to data from more than one source within a single interface.  This commonly includes integration of data from multiple SRS components into one display.  For OWQM users, other data sources that could be useful within a Dashboard include customer complaint calls, routine grab sampling results, system maintenance activity logs, and operations data such as tank levels or flow.  Without an integrated Dashboard, users generally access the additional data by logging onto ...</span><img src="img/radio_mock.png" alt='logo' height='65' width='312' style='margin-left: 10px; border: 2px solid #000767'/></div>
		<div id='qheader'>Requirement 13:&nbsp;&nbsp;&nbsp;User interface with data viewing and plotting capabilities</div>
		<div id='qanswer'><span id='qcontent'>Most automated information management systems contain a user interface through which users can directly access and view data.  Generally data can be viewed in a variety of formats including tabular summaries, time-series plots, control charts, and statistical summaries over an established interval.  Without this functionality, the user must query or export data from the system and then use external tools (such as Microsoft Excel) to analyze or plot the data.<br/><br/>

This functionality can dramatically increase the usability of the system – particularly if data is viewed frequently.  It is suggested that this functionality be included unless entirely infeasible.</span><img src="img/radio_mock.png" alt='logo' height='65' width='312' style='margin-left: 10px; border: 2px solid #000767'/></div>
	</div> <!-- page34 -->
	
	<div id='page11' class='boxedTab'>
    The questions in this module are intended to help you envision how the information management system will be used. An accurate assessment of expected system usage is crucial as it motivates all component functional requirements and is central to design of the system. Provide responses for each of the questions listed below and select the "Next" button to navigate to the next module.
    </div>
	<div id='page12' class='boxedTab'>Coming Soon:  Expected Uses of the System Questions.</div>
	<div id='page21' class='boxedTab'>The questions in this module are intended to help you define the data to be managed. The quantity and frequency of data collected impacts data processing and storage requirements, and data types can impact how data is stored and presented. Provide responses for each of the questions listed below and select the "Next" button to navigate to the next module.</div>
	<div id='page22' class='boxedTab'>Coming Soon:  Data To Be Managed Questions.</div>
	<div id='page31' class='boxedTab' style='text-align:left; margin-top:25px;'>
		In this module, you will rate the importance of information management system features commonly used to support real-time monitoring in an SRS. These are presented in eight categories:
		<ul style='list-style-type:decimal; margin-left: 10px;'>
			<li>General System Features</li>
			<li>Data Display</li>
			<li>Data Export and Reporting</li>
			<li>Alert Generation</li>
			<li>Alert Notification and Investigation</li>
			<li>Data Values (*Not Yet Added during development)</li>
			<li>System Access (*Not Yet Added during development)</li>
			<li>System Updates (*Not Yet Added during development)</li>
		</ul>
		You will rate the importance of each requirement based on your utility's information management system needs using the following classifications:
		<ul style='margin-left: 10px;'>
			<li><strong>Critical:</strong> The component could not be operated as planned without this capability. This feature should unquestionably be included in information management system requirements.</li>
			<li><strong>Highly desired:</strong> Though not absolutely necessary, this feature would greatly enhance the effectiveness and usability of the information management system. Thus, this feature should be included unless it is entirely infeasible due to project constraints.</li>
			<li><strong>Would be nice:</strong> This feature would enhance the information management system and would likely be used by personnel. If it can be achieved within the chosen solution, it should be implemented. However, it should not drive the selection and design process.</li>
			<li><strong>Don't need it:</strong> The feature would not be used.</li>
		</ul>
    </div>
	<div id='page35' class='boxedTab'>Alert Generation Requirements will be here</div>
	<div id='page36' class='boxedTab'>Alert Notification Features Requirements will be here</div>
	<div id='page41'><span><img src="img/mockups/Exhibit_9a_mockup.png" alt='9a' style='margin: 5px; border: 1px solid #000767'/></span></div>
	<div id='page42'><span><img src="img/mockups/Exhibit_9b_mockup.png" alt='9b' style='margin: 5px; border: 1px solid #000767'/></span></div>
	<div id='page43'><span><img src="img/mockups/Exhibit_9c_mockup.png" alt='9c' style='margin: 5px; border: 1px solid #000767'/></span></div>
	
            <div class='next'>
        		<button type="button" id="tabBack" name="" value="" class="glassyBack" onClick="javascript:pageview_switch(4);"/>
        		<button type="button" id="tabNext" name="" value="" class="glassyNext" onClick="javascript:pageview_switch(6);"/>
			</div>

	</div>
	</div>
	</div> <!-- pagewrapper -->
	</div> <!-- tabwrapper -->
    </div> <!-- Page5 ? -->
